luci-theme: fix some dynamic layout issues

Implement a dynamic menu item width to allow item unwrapped and visible:
'min-width: max-content;' or 'max-width: max-content;'

Remove IE hacks and fix a console error for -webkit-scrollbar-thumb

Signed-off-by: Paul Donald <[email protected]>
(cherry picked from commit 91572540595dae9ea88ae5e38ce01847cb4c08e0)

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index c9b768eeb288f3d46f87fb2194e37b5d5cf325c0..803afb0df33aa38236ba8350a4a7bc5f963aae12 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -1156,8 +1156,7 @@ a.menu:after {
        top: 40px;
        left: -9999px;
        z-index: 900;
-       min-width: 160px;
-       max-width: 220px;
+       min-width: max-content;
        margin-left: 0;
        margin-right: 0;
        padding: 6px 0;

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 18584e8e407a32060a3abd5757e4c4ef9ba4c4f2..7575f5113f4472c58e7bc0873f8d1362b9327e9e 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -343,6 +343,7 @@ small {
        float: left;
        overflow-x: auto;
        width: calc(0% + 15rem);
+       min-width: max-content;
        height: calc(100% - 4rem);
        background-color: var(--menu-bg-color);
        transition: visibility 400ms, width 400ms;
@@ -2548,7 +2549,7 @@ input[name="nslookup"] {
 }
 
 /* IE hacks */
-@media all and (-ms-high-contrast: none) {
+@media all {
        .main > .main-left > .nav > .slide > .menu::before {
                top: 30.25%;
        }
@@ -2556,10 +2557,6 @@ input[name="nslookup"] {
        .main > .main-left > .nav > li:last-child::before {
                top: 20%;
        }
-
-       .showSide::before {
-               top: -12px;
-       }
 }
 
 @media screen and (max-width: 1600px) {
@@ -3141,12 +3138,12 @@ input[name="nslookup"] {
        ::-webkit-scrollbar-thumb {
                background: #9e9e9e;
        }
-
+/*
        ::-webkit-scrollbar-thumb:hover {
                background: #757575;
        }
 
        ::-webkit-scrollbar-thumb:active {
                background: #424242;
-       }
+       }*/
 }

diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
index 71cba8eab9973596b2795d6a6cfacd383ed34527..2ab49a9818de8b99210928f139a5309bb2a26c2f 100644 (file)
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -155,8 +155,8 @@ abbr[title], acronym[title] {
 }
 
 #mainmenu {
-       flex: 1 1 100px;
-       max-width: 250px;
+/*     flex: 1 1 100px;*/
+       max-width: max-content;
        background: var(--main-dark-color);
        color: var(--main-bright-color);
        padding: 1em;

diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index 0cb2c150f1aa3bde6daf2bc5b3de28873862971f..3b6f5aa5389882188ebde0bb5b583b0d31840a09 100644 (file)
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -82,7 +82,7 @@ a img {
 }
 
 #mainmenu {
-       max-width: 200px;
+       max-width: max-content;
        background: #f5f5f5;
        border: 1px solid #444;
        border-width: 0 0 1px 1px;